<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
</head>
<body>
	
	<div class="behavior">
		
	</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 500;
		var height = 500
		var svg = d3.select(".behavior").append('svg').attr({"width":width,"height":height});

		var circles = [{cx:150,cy:200,r:30},{cx:250,cy:200,r:30}]

var drag = d3.behavior.drag()
								.origin(function(d,i) {
									return {x:d.cx,y:d.cy}
								})
								.on("dragstart",function(d) {
									console.log("拖拽开始")
								})
								.on("dragend",function(d) {
									console.log("拖拽结束")
								})
								.on("drag",function(d) {
									d3.select(this).attr("cx",d.cx = d3.event.x).attr("cy",d.cy = d3.event.y)
								})
								
		svg.selectAll("circle").data(circles).enter().append("circle")
				.attr("cx",function(d) {
					return d.cx
				})
				.attr("cy",function(d) {
					return d.cy
				})
				.attr("r",function(d) {
					return d.r
				})
				.attr("fill","black")
				.call(drag)

		

	</script>
</body>
</html>